<!--
 * @Author: YuA
 * @Date: 2021-08-04 23:45:56
 * @LastEditTime: 2021-08-22 18:42:54
 * @FilePath: \index\src\views\home\childComps\RecommendView.vue
-->
<template>
  <div class="featureView">
    <div class="feature-title iconfont">
      <slot></slot>
    </div>

    <div class="featureView-slide">
      <slides-2
        :imgs="recommendSong"
        :imgClass="homePageImg"
        :textClass="pageText"
        :swiperOption="swiperOption"
      >
        <slides-3
          :imgs="recommendSong"
          :imgClass="homePageImg"
          :textClass="pageText"
          :swiperOption="swiperOption2"
        />
      </slides-2>
    </div>
  </div>
</template>

<script>
import Slides2 from "components/common/swiper/Slides2";
import Slides3 from "components/common/swiper/Slides3";
export default {
  name: "FeatureView",
  data() {
    return {
      homePageImg: "recommend-page-img",
      pageText: "recommend-page-text",
      swiperOption2: {
        notNextTick: true,
        //循环
        loop: true,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 1,
        //自动播放
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 设置轮播
        effect: "cube",
        centeredSlides: true,
        //滑动速度
        speed: 800,
        //滑动方向
        direction: "vertical",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        // slideClass: "my-slide",
        // wrapperClass: "my-wrapper",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      },
      swiperOption: {
        notNextTick: false,
        //循环
        loop: false,
        //设定初始化时slide的索引
        initialSlide: 0,
        //视图显示个数
        slidesPerView: 3.5,
        // freeMode: true,
        touchRatio: 2, //触摸变慢
        //自动播放
        autoplay: false,
        //滑动速度
        speed: 1000,
        //滑动方向
        direction: "horizontal",
        paginationClickable: true,
        //小手掌抓取滑动
        grabCursor: true,
        //个体类名替换
        slideClass: "recommend-slides",
        wrapperClass: "recommend-wrapper",
        //滑动之后回调函数
        on: {
          slideChangeTransitionEnd: function() {
            // console.log(this.activeIndex);//切换结束时，告诉我现在是第几个slide
          }
        }
      }
    };
  },
  props: {
    recommendSong: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  components: {
    Slides2,
    Slides3
  }
};
</script>

<style lang="scss">
.featureView {
  width: 100%;
  overflow: hidden;
}

.feature-title {
  display: flex;
  justify-content: space-between;
  margin: 10px 10px 0 0;

  color: #fff;
  line-height: 1.4;
}
.index-btn {
  border: 1px solid #d2d2d2;
  border-radius: 15px;

  line-height: 1.5;
  text-align: center;
}
.recommend-more {
  margin-bottom: 10px;
  padding: 2px 6px 2px 10px;
}

.my-wrapper {
  position: relative;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  transition-property: transform;
  box-sizing: content-box;
}
.recommend-wrapper {
  position: relative;
  width: 80%;
  height: 100%;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  transition-property: transform;
  box-sizing: content-box;
}
.recommend-slides {
  display: flex;

  padding: 0;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.recommend-page-img {
  width: 100px;
  height: 100px;

  border-radius: 15px;
  margin-bottom: 10px;
}

.recommend-page-text {
  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: #fff;
}

.featureView-slide {
  display: flex;
}
</style>
